<!-- 采样标准/检测项目多选按钮 -->
<template>
	<view class="index uni-flex uni-column">
		
		<view class="input_name height-auto" v-if="showName == 'NAME'">
			<input type="text" v-model="sampleName"  placeholder="样品名称--请输入" />
		</view>
		
		<view class="height-auto picker_view">
			<view class="uni-flex" style="align-items:center;" v-for="(item, key) in checkList" :key="key" @click="showPicker(item, key)">
				<text class="width-a100 item">{{item.checkVal || '- -请选择- -'}}</text>
				<view class="arrow-box width-auto">
					<view class="bottom">
						<text class="bottom-arrow1"></text>
						<text class="bottom-arrow2"></text> 					
					</view>
				</view>
			</view>
		</view>
		
		<view class="height-a100" v-if="showName == 'ITEM'">
			<view class="uni-list" v-if="items.length > 0">
				<checkbox-group @change="checkboxChange">
					<label class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in items" :key="index">
						<view class="width-auto">
							<checkbox :value="item.id" :checked="item.checked" />
						</view>
						<!--  #ifdef MP-WEIXIN -->
						<text class="width-a100">{{item.name}}</text>
						<!--  #endif -->
						<!--  #ifdef APP-PLUS -->
						<text class="width-a100"><text v-html="item.name"></text></text>
						<!--  #endif -->
						
						
					</label>
				</checkbox-group>
			</view>
			<view class="select_tips" v-if="items.length == 0">暂无选项</view>
		</view>
		
		
		<view class="height-a100" v-if="showName == 'NAME'">
			<view class="uni-list" v-if="items.length > 0">
				<radio-group @change="radioChange">
					<label class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in items" :key="index">
						<view class="width-auto">
							<radio :value="item.name" :checked="item.checked" />
						</view>
						<!--  #ifdef MP-WEIXIN -->
						<text class="width-a100">{{item.name}}</text>
						<!--  #endif -->
						<!--  #ifdef APP-PLUS -->
						<text class="width-a100"><text v-html="item.name"></text></text>
						<!--  #endif -->		
					</label>
				</radio-group>
			</view>
			<view class="select_tips" v-if="items.length == 0">暂无选项</view>
		</view>
		
		<view class="btn-row uni-flex height-auto">
			<button type="primary" class="primary uni-flex-item" @click="confirmFun()">确定</button>
		</view>
		
		<wzp-picker :mode="'one'" ref="wzpPicker" :pickerList="pickerValueArray" @onConfirm="onConfirm" ></wzp-picker>
		<!-- @onCancle="onCancle" -->
	</view>
</template>

<script>
	
	import wzpPicker from '../../components/wzp-picker/wzpPicker.vue';
	import utils from '../../common/utils.js';
	import store from '../../store/index.js';

	export default {
		components: {
			wzpPicker
		
		},
		data() {
			return {
				checkList: [],
				pickerValueDefault: [0],
				pickerValueArray: [],
				items: [],
				data: [],
				curIndex: 0,
				selectItem: {},
				selectItems: [],	// 检测项目
				sampleName: '', // 样品名字
				showName: ''
			};
		},
		onLoad(res) {
			this.data = JSON.parse(res.data);
			
			this.showName = res.showName;
			console.log(res)
			let title = '', defaultCheck = false;
			if(this.showName == 'NAME') {
				title = '样品名称';
			}else if(this.showName == 'ITEM') {
				title = '检测项目';
				defaultCheck = true;
			}else if(this.showName == 'STANDARD') {
				title = '采样标准';
			}
			
			title && uni.setNavigationBarTitle({
				title: title
			});
			
			let selectItems = [];
			if(res.selectItems) selectItems = JSON.parse(res.selectItems);
			if(selectItems.length) this.selectItems = selectItems;
			
			let checkList = JSON.parse(res.checkList);

			if(checkList.length) this.checkList = checkList;
			
			if(res.selectItem) this.selectItem = JSON.parse(res.selectItem);
			
			this.sampleName = res.name || '';
			
			console.log(this.sampleName);

			if(this.checkList.length == 0) {
				let value = [{ name: '', value: ''}];
				if(defaultCheck) {
					let item = this.data[this.curIndex];
					value[0] = { name: item.name,  value: item.id, };
					this.onConfirm({index: [0], value: value});
				}else {
					this.checkList.push({index: [0], value: value});
				}
				
			}else {
				this.setItem();
			}
		},
		methods: {
			showPicker(item, index){
				//console.log(item);
				let indexArray = item.index;
				this.curIndex = index;
				let data = [];
				if(index == 0) {
					data = this.data;
				}else if(index >= 1) {
					let children = this.isChildren(this.data, this.checkList.slice(0, this.curIndex), 0);
					if(children == null || children.length == 0) return;
					data = children;
				}
				this.dataTo(data);
				setTimeout(()=>{
					this.$refs.wzpPicker.showPicker(indexArray);
				}, 0);
			},
			checkboxChange(e){
				this.selectItems = e.detail.value;
			},
			radioChange(e) {
				this.sampleName = e.detail.value;
			},
			confirmFun() {
				//store.dispatch('commitCheckItem', this.selectItems);
				switch(this.showName){
					case 'NAME':	// 名称
						if(!this.sampleName.length) {
							uni.showToast({icon: 'none',title: '采样点名称/样品名称不能为空'});
							return;
						}
						utils.exeCallBack(this.checkList, this.selectItem, this.sampleName);
						break;
					case 'ITEM':	// 项目
						
						let tempArr = [], classifyId = [];
						this.items.forEach((item) => {
							if(this.selectItems.indexOf(item.id) > -1) {
								tempArr.push(item.name);
								classifyId.push(item.classify_id);
							}
						});
						if(!this.selectItems.length) {
							uni.showToast({icon: 'none',title: '检测项目不能为空'});
							return;
						}
						let selectItemsStr = tempArr.join(',');
						utils.exeCallBack(this.checkList, this.selectItems, this.selectItem, selectItemsStr, classifyId);
						break;
					case 'STANDARD':	// 标准
// 						if(!Object.keys(this.selectItem).length) {
// 							uni.showToast({icon: 'none',title: '采样标准不能为空'});
// 							return;
// 						}
						utils.exeCallBack(this.checkList, this.selectItem);
						break;
				}
				uni.navigateBack({ delta: 1 });
			},
			dataTo(data) {
				this.pickerValueArray = [];
				data.forEach((item) => {
					this.pickerValueArray.push({name: item.name, value: item.id});
				});
			},
			setItem() {
				let len = this.checkList.length;
				let checkItem = this.checkList[len-1];
				let checkList = this.checkList;
				if(checkItem.checkVal === '')  checkList = this.checkList.slice(0, len-1);
				let items = this.getItems(this.data, checkList, 0);
				console.log(items);
				this.items = items ? items : [];
				this.items.forEach((item) => {
					if(this.showName == 'ITEM') {
						item.checked = this.selectItems.indexOf(item.id) > -1 ? true: false;
					}else if(this.showName == 'NAME') {
						item.checked = (this.sampleName == item.name);
					}
				});
			},
			onConfirm(data) {
				console.log(data.value);
				// this.checkList[this.curIndex] = {
				// 	index: data.index,
				// 	checkVal: data.value[0].name,
				// 	checkId: data.value[0].value,
				// };

			    //兼容H5,解决选择后,数据更新,视图未更新的bug
				 this.$set(this.checkList,this.curIndex,{
					index: data.index,
					checkVal: data.value[0].name,
					checkId: data.value[0].value,
				})
				this.checkList.length = this.curIndex + 1;
				let children = this.isChildren(this.data, this.checkList, 0);
				if(children != null && Array.isArray(children) && children.length != 0) {
					this.checkList.push({checkVal: '', index: 0, checkId: 0});
				}
				this.selectItem = {
					index: data.index,
					checkVal: data.value[0].name,
					checkId: data.value[0].value,
				};
				this.selectItems = [];
				
				setTimeout(()=>{
					this.setItem();
				}, 0);
				
			},
			getItems(data, indexArr, index) {
				let arrItem = indexArr[index];
				let item = data[arrItem.index];
				if(indexArr.length == index+1 && arrItem.checkVal !== '') {
					return item.items;
				}else if(item != null && Array.isArray(item.children) && item.children.length != 0) {
					return this.getItems(item.children, indexArr, index+1);
				}
			},
			isChildren(data, indexArr, index) {
				let arrItem = indexArr[index];
				let item = data[arrItem.index];
				if(indexArr.length == (index+1)) { 
					return item.children;
				}else if(item != null && Array.isArray(item.children) && item.children.length != 0) {
					return this.isChildren(item.children, indexArr, index+1);
				}
			},
			onCancel(value) {
				console.log(value);
			}
		}
		
	}
</script>

<style lang="scss">
	
	.index {
		margin-top: 50upx;
		// height: 100%;
		padding:30upx;
		width: 100%;
		view{
			padding: 10upx 20upx;
		}
	}
	
	.uni-list-cell:after {
		left: 0;
		height: 0;
	}
	
	.select_tips {
		padding: 20upx;
		background: #fff;
		color: #007AFF;
		font-size: 32upx;
	}
	
	.picker_view {
		margin-bottom: 20upx;
	}
	
	.picker_view .item {
		padding: 0 20upx;
		font-size: 38upx;
	}
	
	.select_item {
		font-size: 32upx;
		padding: 10upx;
		margin: 8upx;
		background: #1AAD19;
	}
	
	.input_name {
		margin-bottom: 20upx;
		padding: 10upx 20upx;
		border-bottom: 1px solid #333333;
	}
	
	.height-a100 {
		max-height: 700upx;
		overflow: auto;
	}

	
</style>
